<template>
  <div class="table-container">
    <div>
      <el-button class="button-add" @click="dialogAddProject = true"
        >添加项目</el-button
      >
      <el-button class="button-add" @click="onUploadPackageClick"
        >上传安装包</el-button
      >
    </div>
    <el-table :data="projects" style="width: 100%" height="240">
      <el-table-column prop="name" label="项目名称" />
      <el-table-column prop="count" label="安装包数量" />
      <el-table-column label="编辑">
        <template #default="scope">
          <el-button
            type="success"
            round
            size="small"
            @click="onRenameClick(scope.row)"
            >修改
          </el-button>
          <el-popconfirm
            title="确定要删除该项目么"
            confirmButtonText="确认"
            cancelButtonText="我再想想"
            @confirm="onDeleteClick(scope.row)"
          >
            <template #reference>
              <el-button type="danger" round size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogChangeName" width="360px" center>
      <template #title>
        <div>修改项目名称</div>
      </template>
      <el-form :model="form" label-position="top">
        <el-form-item label="项目名">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onRenameFormSubmit"> 确定</el-button>
        <el-button @click="dialogChangeName = false"> 取消</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogAddProject" width="360px" center>
      <template #title>
        <div>添加新项目</div>
      </template>
      <el-form :model="form" label-position="top">
        <el-form-item label="项目名">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onInsertFormSubmit"> 确定</el-button>
        <el-button @click="dialogAddProject = false"> 取消</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogAddPackage" width="540px" center>
      <template #title>
        <div>上传安装包</div>
      </template>
      <el-form :model="form" label-position="top">
        <el-select
          v-model="form.pid"
          placeholder="项目"
          size="large"
          style="margin-bottom: 20px; width: 100%"
        >
          <el-option
            v-for="item in projectsSelector"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <div class="selector-option">
              <span>{{ item.name }}</span>
              <div style="flex-grow: 1"></div>
            </div>
          </el-option>
        </el-select>
        <el-form-item label="版本号">
          <el-input v-model="form.version" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.desc" />
        </el-form-item>
        <el-form-item label="安装包">
          <input ref="file" type="file" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onPackageInsertFormSubmit">
          确定</el-button
        >
        <el-button @click="dialogAddPackage = false"> 取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import client from "@/api/client.js";
import { ElMessage } from "element-plus";
// import axios from "axios";
export default {
  name: "ProjectView",
  components: {},
  props: {},
  created() {
    this.doRefresh();
  },
  data() {
    return {
      dialogChangeName: false,
      dialogAddProject: false,
      dialogAddPackage: false,
      dialogDelete: false,
      projects: [],
      projectsSelector: [],
      form: {
        name: "",
        id: "",
        desc: "",
        pid: -1,
      },
    };
  },
  methods: {
    onUploadPackageClick() {
      this.dialogAddPackage = true;
      let _field = this;
      client.productQuery().then(function (res) {
        if (res.data.code === 200) {
          _field.projectsSelector = res.data.response;
          if (_field.projectsSelector.length > 0) {
            _field.form.pid = _field.projectsSelector[0].id;
          }
        }
      });
    },
    doRefresh() {
      let _field = this;
      client.productQuery().then(function (res) {
        if (res.data.code === 200) {
          _field.projects = res.data.response;
        }
      });
    },
    onDeleteClick(item) {
      let _field = this;
      client
        .productDelete({
          id: item.id,
        })
        .then(function (res) {
          if (res.data.code === 200) {
            let response = res.data.response;
            ElMessage.success(response);
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(function () {
          _field.doRefresh();
        });
    },
    onRenameClick(item) {
      this.dialogChangeName = true;
      this.form = {
        name: item.name,
        id: item.id,
      };
    },
    onPackageInsertFormSubmit() {
      if (
        !this.form.pid ||
        !this.form.version ||
        this.$refs.file.files.length === 0
      ) {
        ElMessage.error("有必填项未填写!");
        return;
      }
      let formData = new FormData();
      formData.append("file", this.$refs.file.files[0]);
      formData.append("pid", this.form.pid);
      formData.append("version", this.form.version);
      formData.append("desc", this.form.desc);
      let _field = this;
      client
        .packageInsert(formData)
        .then(function (res) {
          if (res.data.code === 200) {
            let response = res.data.response;
            ElMessage.success(response);
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(function () {
          _field.dialogAddPackage = false;
          _field.form = {};
          _field.doRefresh();
        });
    },
    onInsertFormSubmit() {
      let _field = this;
      client
        .productInsert({
          name: _field.form.name,
        })
        .then(function (res) {
          if (res.data.code === 200) {
            let response = res.data.response;
            ElMessage.success(response);
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(function () {
          _field.dialogAddProject = false;
          _field.form = {};
          _field.doRefresh();
        });
    },
    onRenameFormSubmit() {
      let _field = this;
      client
        .productUpdate({
          name: _field.form.name,
          id: _field.form.id,
        })
        .then(function (res) {
          if (res.data.code === 200) {
            let response = res.data.response;
            ElMessage.success(response);
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(function () {
          _field.dialogChangeName = false;
          _field.form = {};
          _field.doRefresh();
        });
    },
  },
};
</script>
<style scoped>
.table-container {
  margin: 0 120px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.button-add {
  width: 80px;
  height: 40px;
  margin-bottom: 10px;
}
.selector-option {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
</style>
